<script setup lang="ts">
import { Close, Loading } from '@element-plus/icons-vue'

interface Props {
  items: SelectOptionType[]
  loading?: boolean
}

const modelValue = defineModel<string | number | undefined>()

const props = defineProps<Props>()

const emit = defineEmits(['icon-click'])

const onClick = (item: SelectOptionType) => {
  if (props.loading) return
  modelValue.value = item.value
}

const onIcon = (tag: SelectOptionType, index: number) => {
  if (props.loading) return
  emit('icon-click', { tag, index })
}
</script>

<template>
  <div class="tag-view flex align-center flex-grow overflow-x-auto font12">
    <div
      v-for="(item, index) in items"
      :key="index"
      class="tag-view-item cursor-pointer flex align-center flex-shrink"
      :class="{ active: item.value === modelValue }"
      @click="onClick(item)"
    >
      <span>{{ item.label }}</span>
      <el-icon v-if="loading" class="ml5" @click.stop="onIcon(item, index)">
        <Loading />
      </el-icon>
      <el-icon v-else class="ml5" @click.stop="onIcon(item, index)">
        <Close />
      </el-icon>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tag-view {
  .tag-view-item {
    padding: 5px 7px;
    margin-right: 5px;
    border-radius: 3px;
    border: var(--el-border);

    &.active {
      background-color: var(--el-color-primary-dark-2);
      border-color: var(--el-color-primary);
      color: white;
    }
  }
}
</style>
